<!--
 * @Author: huangximian huangximian@e-ling.com.cn
 * @Date: 2022-05-27 17:21:10
 * @LastEditors: huangximian huangximian@e-ling.com.cn
 * @LastEditTime: 2022-06-06 10:27:17
 * @FilePath: \jcyy-official-website\src\views\android\pages\aboutJinChun\aboutindex.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="aboutJin">
    <div class="home_img">
      <img src="../../../../assets/images/u58.png" alt="" />
    </div>
    <div class="content_android">
      <!-- <van-tabs type="card">
        <van-tab v-for="item in tabli()" :key="item.id" :title="item.name"
          >内容 1</van-tab
        >
      </van-tabs> -->
      <div class="tabswitch">
        <div
          :class="item.booer ? 'tabsuw' : ''"
          v-for="item in tabli()"
          :key="item.id"
          @click="tabstate(item)"
        >
          {{ item.name }}
        </div>
      </div>

      <!-- 企业荣誉 -->
      <div class="tab_one">
        <p class="tab_p">荣誉奖项</p>
        <p class="tab_p_tow">HONORARY AWARDS</p>
        <div class="tab_one_foldlist">
          <div class="tab_one_foldlist_div">
            <div class="tab_one_img">
              <img src="../../../../assets/images/u58.png" alt="" />
            </div>
            <div class="tab_button">
              <p>济南养老服务发展促进会理事单位</p>
              <hr />
              <p>2022-03-09</p>
            </div>
          </div>
          <div class="tab_one_foldlist_div">
            <div class="tab_one_img">
              <img src="../../../../assets/images/u58.png" alt="" />
            </div>
            <div class="tab_button">
              <p>济南养老服务发展促进会理事单位</p>
              <hr />
              <p>2022-03-09</p>
            </div>
          </div>
          <div class="tab_one_foldlist_div">
            <div class="tab_one_img">
              <img src="../../../../assets/images/u58.png" alt="" />
            </div>
            <div class="tab_button">
              <p>济南养老服务发展促进会理事单位</p>
              <hr />
              <p>2022-03-09</p>
            </div>
          </div>
          <div class="tab_one_foldlist_div">
            <div class="tab_one_img">
              <img src="../../../../assets/images/u58.png" alt="" />
            </div>
            <div class="tab_button">
              <p>济南养老服务发展促进会理事单位</p>
              <hr />
              <p>2022-03-09</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 品牌介绍 -->
      <div v-if="false">
        <div class="tab_one">
          <p class="tab_p">关于历下控股</p>
          <p class="tab_p_tow">ON THE CALENDAR HOLDING</p>
          <div class="tab_two_nei">
            <p>
              济南历下控股集团有限公司(以下简称"历下控股集团")成立于2016年7月，是经济南市历下区人民政府批准成立的国有平台公司。成立以来，历下控股集团始终坚持以创造价值、服务城市发展为中心，坚持以政府为引导、资本为纽带、市场为导向、重大项目为带动，紧紧围绕明府城保护开发、中央商务区招商建设~两大主战场”，全面推进招商引资、项目建设、棚改旧改、投资融资、产业培育等各项重点工作。经过五年多的快速发展，历下控股集团已经发展成为下辖13家全资子公司，1家合资参股公司，资产规模超460亿元，信用评级AA+，搭建形成城市开发
            </p>
          </div>
          <div class="tab_two_img">
            <img src="../../../../assets/images/u58.png" alt="" />
          </div>
        </div>
        <div class="tab_one">
          <p class="tab_p">关于历下控股</p>
          <p class="tab_p_tow">ON THE CALENDAR HOLDING</p>
          <div class="tab_two_nei">
            <p>
              济南历下控股集团有限公司(以下简称"历下控股集团")成立于2016年7月，是经济南市历下区人民政府批准成立的国有平台公司。成立以来，历下控股集团始终坚持以创造价值、服务城市发展为中心，坚持以政府为引导、资本为纽带、市场为导向、重大项目为带动，紧紧围绕明府城保护开发、中央商务区招商建设~两大主战场”，全面推进招商引资、项目建设、棚改旧改、投资融资、产业培育等各项重点工作。经过五年多的快速发展，历下控股集团已经发展成为下辖13家全资子公司，1家合资参股公司，资产规模超460亿元，信用评级AA+，搭建形成城市开发
            </p>
          </div>
        </div>
        <div class="tab_one">
          <p class="tab_p">关于历下控股</p>
          <p class="tab_p_tow">ON THE CALENDAR HOLDING</p>
          <div class="tab_two_nei">
            <p>
              济南历下控股集团有限公司(以下简称"历下控股集团")成立于2016年7月，是经济南市历下区人民政府批准成立的国有平台公司。成立以来，历下控股集团始终坚持以创造价值、服务城市发展为中心，坚持以政府为引导、资本为纽带、市场为导向、重大项目为带动，紧紧围绕明府城保护开发、中央商务区招商建设~两大主战场”，全面推进招商引资、项目建设、棚改旧改、投资融资、产业培育等各项重点工作。经过五年多的快速发展，历下控股集团已经发展成为下辖13家全资子公司，1家合资参股公司，资产规模超460亿元，信用评级AA+，搭建形成城市开发
            </p>
          </div>
        </div>
        <div class="tab_one">
          <p class="tab_p">关于历下控股</p>
          <p class="tab_p_tow">ON THE CALENDAR HOLDING</p>
          <div class="tab_two_nei">
            <p>
              济南历下控股集团有限公司(以下简称"历下控股集团")成立于2016年7月，是经济南市历下区人民政府批准成立的国有平台公司。成立以来，历下控股集团始终坚持以创造价值、服务城市发展为中心，坚持以政府为引导、资本为纽带、市场为导向、重大项目为带动，紧紧围绕明府城保护开发、中央商务区招商建设~两大主战场”，全面推进招商引资、项目建设、棚改旧改、投资融资、产业培育等各项重点工作。经过五年多的快速发展，历下控股集团已经发展成为下辖13家全资子公司，1家合资参股公司，资产规模超460亿元，信用评级AA+，搭建形成城市开发
            </p>
          </div>
        </div>
      </div>

      <!-- 文化理念 -->
      <div v-if="false">
        <div class="tab_one">
          <p class="tab_p">文化理念</p>
          <p class="tab_p_tow">COMPAMY CULTURE</p>
        </div>
        <div class="tab_three">
          <p class="tab_three_p">文化理念</p>
          <p class="tab_three_tow">让城市更美好</p>
        </div>
        <div class="tab_three">
          <p class="tab_three_p">发展愿景</p>
          <p class="tab_three_tow">
            成为市场化、专业化、品牌化的城市运营综合服务商
          </p>
        </div>
        <div class="tab_three">
          <p class="tab_three_p">核心价值观</p>
          <p class="tab_three_tow">止于至善、义利共赢</p>
        </div>
        <div class="tab_three">
          <p class="tab_three_p">企业精神</p>
          <p class="tab_three_tow">职业、专业、敬业、乐业</p>
        </div>
        <div class="tab_three">
          <p class="tab_three_p">经营理念</p>
          <p class="tab_three_tow">客户导向，规范高效，创新求变，卓业至善</p>
        </div>
      </div>

      <!-- 发展历程 -->
      <div v-if="false">
        <div class="tab_one">
          <p class="tab_p">发展历程</p>
          <p class="tab_p_tow">DEVELOPMENT HISTORY</p>
        </div>
        <div class="tab_three">
          <p class="tab_three_p">2016年</p>
          <div class="tab_date">
            <div>07-18</div>
            <div>
              <p>历下控股在济南市历下区市场监督管理局登记成立</p>
            </div>
          </div>
          <div class="tab_date">
            <div>07-18</div>
            <div>
              <p>历下控股在济南市历下区市场监督管理局登记成立</p>
            </div>
          </div>
          <div class="tab_date">
            <div>07-18</div>
            <div>
              <p>历下控股在济南市历下区市场监督管理局登记成立</p>
            </div>
          </div>
        </div>
        <div class="tab_three">
          <p class="tab_three_p">2016年</p>
          <div class="tab_date">
            <div>07-18</div>
            <div>
              <p>历下控股在济南市历下区市场监督管理局登记成立</p>
            </div>
          </div>
          <div class="tab_date">
            <div>07-18</div>
            <div>
              <p>历下控股在济南市历下区市场监督管理局登记成立</p>
            </div>
          </div>
          <div class="tab_date">
            <div>07-18</div>
            <div>
              <p>历下控股在济南市历下区市场监督管理局登记成立</p>
            </div>
          </div>
        </div>
        <div class="tab_three">
          <p class="tab_three_p">2016年</p>
          <div class="tab_date">
            <div>07-18</div>
            <div>
              <p>历下控股在济南市历下区市场监督管理局登记成立</p>
            </div>
          </div>
          <div class="tab_date">
            <div>07-18</div>
            <div>
              <p>历下控股在济南市历下区市场监督管理局登记成立</p>
            </div>
          </div>
          <div class="tab_date">
            <div>07-18</div>
            <div>
              <p>历下控股在济南市历下区市场监督管理局登记成立</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 合作伙伴 -->
      <div v-if="false">
        <div class="tab_one">
          <p class="tab_p">合作伙伴</p>
          <p class="tab_p_tow">COOPERATIVE PARTNER</p>
        </div>
        <div class="tab_five">
          <div class="tab_five_div">
            <div class="tab_five_div_img">
              <img src="../../../../assets/images/u100.png" alt="" />
            </div>
            <div class="tab_five_div_tiele">
              <p>深圳壹零后信息技术有限公司</p>
            </div>
          </div>
          <div class="tab_five_div">
            <div class="tab_five_div_img">
              <img src="../../../../assets/images/u100.png" alt="" />
            </div>
            <div class="tab_five_div_tiele">
              <p>深圳壹零后信息技术有限公司</p>
            </div>
          </div>
          <div class="tab_five_div">
            <div class="tab_five_div_img">
              <img src="../../../../assets/images/u100.png" alt="" />
            </div>
            <div class="tab_five_div_tiele">
              <p>深圳壹零后信息技术有限公司</p>
            </div>
          </div>
          <div class="tab_five_div">
            <div class="tab_five_div_img">
              <img src="../../../../assets/images/u100.png" alt="" />
            </div>
            <div class="tab_five_div_tiele">
              <p>深圳壹零后信息技术有限公司</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "aboutJin",
  data() {
    return {
      tablist: [
        {
          name: "品牌介绍",
          booer: true,
          id: "1",
        },
        {
          name: "文化理念",
          booer: false,
          id: "2",
        },
        {
          name: "发展历程",
          booer: false,
          id: "3",
        },
        {
          name: "企业荣誉",
          booer: false,
          id: "4",
        },
        {
          name: "合作伙伴",
          booer: false,
          id: "5",
        },
      ],
      id: 0,
      locationg: "",
    };
  },
  watch: {
    id(e) {
      console.log(e);
    },
  },
  methods: {
    tabli() {
      return this.tablist;
    },
    tabstate(vlaue) {
      for (const a of this.tablist) {
        if (a.id == vlaue.id) {
          a.booer = true;
        } else {
          a.booer = false;
        }
      }
      this.id = vlaue.id;
    },
  },
};
</script>
<style scoped>
.content_android {
  margin: 1.2rem 1.5rem 4rem 1.5rem;
  overflow: hidden;
}
.home_img {
  width: 100%;
  height: 15rem;
}
.home_img img {
  width: 100%;
  height: 100%;
}
.tabswitch {
  display: inline-flex;
  text-align: center;
  overflow: hidden;
  line-height: 3rem;
  margin-top: 1rem;
  border-bottom: 2px solid rgba(247, 139, 15, 1);
}
.tabswitch div {
  width: 8.6rem;
  height: 3rem;
  opacity: 1;
  font-size: 1.4rem;
}
.tabsuw {
  background: #f78b0f;

  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  font-size: 1.4rem;
}
.tab_p {
  font-size: 1.7rem;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #d51010;
  /* line-height: 28px; */
}
.tab_three_p {
  font-size: 1.4rem;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #d51010;
  /* line-height: 22px; */
}
.tab_three_tow {
  font-size: 1.4rem;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  /* line-height: 22px; */
  margin-top: 0.8rem;
}
.tab_p_tow {
  font-size: 1rem;
  font-family: Arial-Regular, Arial;
  font-weight: 400;
  color: #d51010;
  margin-top: 0.3rem;
}
.tab_one_img img {
  width: 16.8rem;
  height: 10rem;
  margin: 2rem 0 2rem 0;
}
.tab_button {
  padding: 1.2rem;
  background: #ffffff;
  box-shadow: 0px 2px 4px 1px rgb(0 0 0 / 10%);
  border-radius: 0px 0px 2px 2px;
  opacity: 1;
  border: 1px solid #ffffff;
}
.tab_button p:nth-child(1) {
  font-size: 1.4rem;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 换行2段 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
hr {
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0px 0px 0px 0px;
  margin-top: 0.8rem;
}
.tab_button p:nth-child(3) {
  font-size: 1.1rem;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 0.8rem;
}
.tab_one {
  margin-top: 2rem;
}
.tab_three {
  margin-top: 1.6rem;
}
.tab_one_foldlist {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.tab_one_foldlist_div {
  width: 16.8rem;
  /* height: 14rem; */
  margin-top: 1.6rem;
}
.tab_two_nei {
  margin-top: 1.6rem;
}
.tab_two_nei p {
  font-size: 1.4rem;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 2.2rem;
}
.tab_two_img {
  margin-top: 1.6rem;
  text-align: center;
}
.tab_two_img img {
  width: 19.3rem;
  height: 19.3rem;
}
.tab_five {
  margin-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.tab_five_div {
  width: 16.8rem;
  /* height: 15.2rem; */
  margin-top: 1.6rem;
  /* background: #d51010; */
}
.tab_five_div_img {
  width: 16.8rem;
  height: 5.5rem;
  margin: 3rem 0rem 3rem 0rem;
  box-shadow: 0px 2px 4px 1px rgb(0 0 0 / 10%);
  border-radius: 0px 0px 2px 2px;
  opacity: 1;
  border: 1px solid #ffffff;
  background: #ffffff;
}
.tab_five_div_img img {
  width: 100%;
  height: 100%;
  /* width: 16.8rem;
  height: 6.5rem; */
  /* margin: 3rem 0rem 3rem 0rem; */
  /* box-shadow: 0px 2px 4px 1px rgb(0 0 0 / 10%);
  border-radius: 0px 0px 2px 2px;
  opacity: 1;
  border: 1px solid #ffffff;
  background: #ffffff; */
}
.tab_five_div_tiele {
  font-size: 1.4rem;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.8);
  background: #ffffff;

  box-shadow: inset -1px -2px 4px 1px rgb(0 0 0 / 10%);
  border-radius: 0px 0px 2px 2px;

  opacity: 1;
  border: 1px solid #ffffff;
  padding: 1.2rem;
}
</style>
<style>
.van-tabs__nav--card {
  box-sizing: border-box;
  height: 30px;
  margin: 0 !important;
  border: 1px solid #ee0a24;
  border-radius: 2px;
}
.van-tabs__nav--card .van-tab {
  color: #ee0a24;
  border-right: none !important;
}
.van-tabs__nav--card {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 30px;
  margin: 0 !important;
  border: none !important;
  border-bottom: 2px solid rgba(247, 139, 15, 1) !important;
  border-radius: 2px;
}
.van-tab__text--ellipsis {
  display: -webkit-box;
  /* overflow: hidden; */
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  /* margin: 10px; */
  width: 9.6rem !important;
  text-align: center;
}
.van-tabs__nav--card .van-tab.van-tab--active {
  color: #fff;
  background-color: #ee0a24;
  width: 9.6rem !important;
}
.tab_date {
  display: flex;
  margin-top: 1.2rem;
}
.tab_date div:nth-child(1) {
  width: 5.2rem;
  font-size: 1.4rem;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
}
.tab_date div:nth-child(2) {
  font-size: 1.4rem;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  margin-left: 1rem;
}
</style>